import React, {useEffect, useRef, useState} from 'react';
import { TextInput, View, StyleSheet, Image, Text, ScrollView, TouchableOpacity} from 'react-native';
import AsyncStorage from "@react-native-async-storage/async-storage";

const HomeScreen = () => {
    // 创建一个ref来引用ScrollView
    const scrollViewRef = useRef(null);
    // 定义一个变量，用以存储用户输入的值
    const [userInput, setUserInput] = useState('');
    // 定义一个对象数组，用以存储消息页面的数据
    const [messages, setMessages] = useState([
        { text: '给文明以岁月', dir: 'left' },
        { text: '给岁月以文明', dir: 'right' },
        { text: '给文明以岁月', dir: 'left' },
        { text: '给岁月以文明', dir: 'right' },
        { text: '给文明以岁月', dir: 'left' },
        { text: '给岁月以文明', dir: 'right' },
        { text: '给文明以岁月', dir: 'left' },
        { text: '给岁月以文明', dir: 'right' },
        { text: '给文明以岁月', dir: 'left' },
        { text: '给岁月以文明', dir: 'right' },
        { text: '给文明以岁月', dir: 'left' },
        { text: '给岁月以文明', dir: 'right' },
        { text: '给文明以岁月', dir: 'left' },
        { text: '给岁月以文明', dir: 'right' },
        { text: '给文明以岁月', dir: 'left' },
        { text: '给岁月以文明', dir: 'right' },
        { text: '给文明以岁月', dir: 'left' },
        { text: '给岁月以文明', dir: 'right' },
        { text: '给文明以岁月', dir: 'left' },
        { text: '给岁月以文明', dir: 'right' },
        { text: '给文明以岁月', dir: 'left' },
        { text: '给岁月以文明', dir: 'right' },
        { text: '给文明以岁月', dir: 'left' },
        { text: '给岁月以文明', dir: 'right' },
        { text: '给文明以岁月', dir: 'left' },
        { text: '给岁月以文明', dir: 'right' },
        { text: '给文明以岁月', dir: 'left' },
        { text: '给岁月以文明', dir: 'right' },
        { text: '给文明以岁月', dir: 'left' },
        { text: '给岁月以文明', dir: 'right' },
        { text: '给文明以岁月', dir: 'left' },
        { text: '给岁月以文明', dir: 'right' },
        // 添加其他消息对象
    ]);

    // 在页面渲染之前就开始调用的钩子函数
    useEffect(() => {
        // 在组件加载时从存储中获取消息数组
        loadMessages().then(r =>
            // 翻滚到页面底部
            scrollViewRef.current?.scrollToEnd({ animated: true })
        );

    }, []); // 空数组表示该 effect 仅在组件挂载时执行

    // 加载本地数组的函数
    const loadMessages = async () => {
        try {
            // 从本地存储中获取数组并解析为对象
            const storedMessages = await AsyncStorage.getItem('messages');

            // 如果本地存储中存在数据，则将messages数组变量的值更新
            if (storedMessages) {
                setMessages(JSON.parse(storedMessages));
            }

        } catch (error) {
            console.error('Error loading messages:', error);
        }
    };

    // sendMessage函数包含了发送消息要做的工作
    const sendMessage = () => {

        // 获取TextInput的内容
        const newMessageText = userInput// 获取TextInput的内容，具体方法根据实际情况而定

        // 创建临时数组变量，内容为包含了新发送消息的消息数组
        const updatedMessages = [...messages, { text: newMessageText, dir: 'right' }, { text: newMessageText, dir: 'left' }];

        // 更新消息数组————用户发送部分
        setMessages(updatedMessages);

        // 将更新后的消息数组保存到存储中
        saveMessages(updatedMessages).then(r =>
            // 滚动到底部
            scrollViewRef.current?.scrollToEnd({ animated: true })
        );

        // 清空TextInput的内容，如果需要的话
        setUserInput('');
    };

    // 将新发送的消息存储到本地的函数
    const saveMessages = async (updatedMessages) => {
        try {
            // 将更新后的消息数组保存到存储中
            await AsyncStorage.setItem('messages', JSON.stringify(updatedMessages));
        } catch (error) {
            console.error('Error saving messages:', error);
        }
    };

    return (
        <View style={styles.container}>

            {/*/!*按钮*!/*/}
            {/*<View style={styles.buttonContainer}>*/}
            {/*    <Button*/}
            {/*        title="Go to Second Screen"*/}
            {/*        onPress={() => navigation.navigate('Second')}*/}
            {/*    />*/}
            {/*</View>*/}

            {/*消息*/}
            <View style={styles.messageContainer}>
                <ScrollView
                    contentContainerStyle={styles.scrollViewContent}
                    ref={scrollViewRef} // 将ref添加到ScrollView
                >
                    {messages.map((msg, index) => (
                        <View
                            key={index}
                            style={[
                                styles.displayFlex,
                                { flexDirection: msg.dir === 'left' ? 'row' : 'row-reverse' },
                            ]}
                        >
                            <Image
                                source={require('../assets/chat.jpg')}
                                style={styles.profilePicture}
                            />
                            <Text
                                style={[
                                    styles.messageBoard,
                                    { backgroundColor: msg.dir === 'left' ? '#fff' : '#0092fe' },
                                    { color: msg.dir === 'left' ? 'black' : 'white' },
                                ]}
                            >
                                {msg.text}
                            </Text>
                        </View>
                    ))}
                </ScrollView>
            </View>

            {/*底部*/}
            <View style={styles.bottomContainer}>
                <TextInput
                    style={styles.chatInput}
                    onChangeText={(text) => setUserInput(text)}
                    value={userInput}
                />
                <TouchableOpacity
                    style={styles.sendButton}
                    onPress={() => sendMessage()}
                >
                    <Text style={styles.sendButton}>Send</Text>
                </TouchableOpacity>
            </View>

        </View>
    );
};

const styles = StyleSheet.create({
    // 最外层的View模块
    container: {
        flex: 1,
        justifyContent: 'space-between', // 将子组件放置在容器的顶部和底部
    },

    // 页面顶部的按钮容器
    buttonContainer: {
        paddingTop: 10, // 调整顶部间距
    },

    // 整个页面的底部模块
    bottomContainer: {
        flexDirection: 'row',
        alignItems: 'center',
        flexWrap: 'wrap', // 添加这一行
        justifyContent: 'flex-end',
        padding: 2,
        backgroundColor: '#e7e7e7',
    },
    // 底部模块中的输入框部分
    chatInput: {
        flex: 4, // 占据 bottomView 的 80%
        height: 40,
        backgroundColor: '#fff',
        padding: 10,
        borderRadius: 5,
        margin: 4,
    },
    // 底部模块中的发送按钮
    sendButton: {
        flex: 1, // 占据 bottomView 的 20%
        height: 38,
        marginTop: 10,
        borderRadius: 5,
        backgroundColor: '#005dfe',
        alignItems: 'center',
        color: 'white',
    },

    // 中间的消息模块容器
    messageContainer: {
        flex: 1, // 占据剩余空间
        paddingTop: 10, // 调整顶部间距
        paddingEnd: 10,
    },
    scrollViewContent: {
        flexGrow: 1,
        // justifyContent: 'flex-end',
    },
    displayFlex: {
        marginBottom: 5,
        alignItems: 'center',
        flexWrap: 'wrap', // 添加这一行
    },
    profilePicture: {
        width: 30,
        height: 30,
        margin: 10,
        marginTop: 0,
        borderRadius: 15,
        backgroundColor: '#333',
    },
    messageBoard: {
        height: 40,
        padding: 10,
        borderRadius: 5,
        alignSelf: 'flex-start',
        marginLeft: 2,
    }
});

export default HomeScreen;
